<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>姓名 </span>
        <Input v-model="param.playerName" placeholder="请输入" clearable style="width: 150px" />
        <span>手机号码 </span>
        <Input v-model="param.playerPhone" placeholder="请输入" clearable style="width: 150px" />
        <span>注册状态 </span>
        <Select v-model="param.playerStatus" style="width: 150px;" clearable>
          <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <span>注册开始时间 </span>
        <DatePicker type="date" placeholder="请选择" style="width:150px; " v-model="param.startTime" @on-change="startChange"></DatePicker>
        <span>注册结束时间 </span>
        <DatePicker type="date" :options="opEndTime" placeholder="请选择" style="width:150px;" v-model="param.endTime" @on-change="endChange"></DatePicker>
          <Button @click="query" class="m-l-lg" type="primary" icon="md-search">筛选</Button>
          <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Card class="m-t-sm">
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="param.pageNo" :size="param.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>
  </div>
</template>

<script>
  import Api from "@/api/public-golf";
  const api = new Api();
  export default {
        data() {
            return {
              loading:false,
              param:{
                pageNo:1,
                pageSize:10,
                playerName:'',
                playerPhone:'',
                playerGender:'',
                playerCardType:'',
                playerCardNumber:'',
                registionTime:'',
                playerStatus:'',
                startTime:'',
                endTime:''
                // LastUpdateTime:''
              },
              total:0,
              tableColumns:[
                {
                  title: "序号",
                  width: 80,
                  align: "left",
                  render: (h, params) => {
                    return h(
                      "span", params.index + 1
                    );
                  }
                },
                {
                  title: "编号",
                  key: "ossPlayerId",
                },
                {
                  title: "姓名",
                  key: "playerName",
                },
                {
                  title: "手机号",
                  key: "playerPhone",
                },
                {
                  title: "性别",
                  key: "playerGender",
                  render:(h,params)=>{
                    return h('span',params.row.playerGender === '1'?'男':'女')
                  }
                },
                {
                  title: "证件类型",
                  key: "playerCardType",
                  render:(h,params)=>{
                    return h('span',params.row.playerCardType === '1'?'身份证':'护照')
                  }
                },
                {
                  title: "证件号码",
                  key: "playerCardNumber",
                },
                {
                  title: "注册时间",
                  key: "registionTime",
                  render:(h,params)=> {
                    let date = Number(params.row.registionTime)*1000
                    return h('span',this.$moment(date).format('YYYY-MM-DD'))
                  }
                },
                {
                  title: "状态",
                  key: "playerStatus",
                  render:(h,params)=> {
                    return h('span',params.row.playerStatus === '0'?'未注册':'已注册')
                  }
                },
              ],
              tableData:[],
              sex:[
                {
                  label:'男',
                  value:'1',
                },
                {
                  label:'女',
                  value:'2'
                }
              ],
              status:[
                {
                  label:'未注册',
                  value:'0',
                },
                {
                  label:'已注册',
                  value:'1'
                }
              ],
              opEndTime: {
                disabledDate: date => {
                  let self = this;
                  return (
                    date &&
                    self.param.startTime &&
                    self.param.startTime.valueOf() > date.valueOf()
                  );
                }
              },

            }
        },
        watch: {},
        computed: {},
        created() {
          this.query()
        },
        methods: {
          query() {
            this.loading = true;
            api.queryList(this.param)
              .then(res => {
                this.loading = false;
                this.tableData = res.list;
                this.total = res.count
              })
              .catch(err => {
                this.loading = false
              })
          },
          reset() {
            this.param.pageNo = 1;
            this.param.playerStatus = '';
            this.param.playerPhone = '';
            this.param.playerName = '';
            this.param.startTime = null;
            this.param.endTime = null;
            this.query()
          },
          // 分页
          changePage(pageNum) {
            this.param.pageNo = pageNum;
            this.query();
          },
          startChange(e) {
            this.param.startTime = e
          },
          endChange(e) {
            this.param.endTime = e
          }

        }
    };
</script>
<style scoped>

</style>
